<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>会员登录</title>
    <link rel="stylesheet" type="text/css" href="/css/login.css">

</head>
<body>
<!-- login -->
<div class="top center">
    <div class="logo center">
        <a href="index.ftl" target="_blank"><img src="/image/mistore_logo.png" alt=""></a>
    </div>
</div>
<form id="addForm" method="post" action="" class="form center">
    <div class="login">
        <div class="login_center">
            <div class="login_top">
                <div class="left fl">会员登录</div>
                <div class="right fr">您还不是我们的会员？<a href="/user/page/register" target="_self">立即注册</a></div>
                <div class="clear"></div>
                <div class="xian center"></div>
            </div>
            <div class="login_main center">
                <div class="username">邮&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;<input id="email" class="shurukuang" type="email"
                                                                              name="email" placeholder="请输入你的邮箱"/></div>
                <span id="check_email" class="error_icon"></span>
                <div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input id="password" class="shurukuang"
                                                                              type="password" name="password"
                                                                              placeholder="请输入你的密码"/></div>
                <span id="check_password" class="error_icon"></span>
                <div class="username">
                    <div class="left fl">验证码:&nbsp;<input id="verifyCode" class="yanzhengma" type="text"
                                                          name="yanzhengma" placeholder="请输入验证码"/></div>
                    <div class="right fl"><img id="verifyCodeImg" style="width: 98px; height: 40px;"
                                               src="/user/login/verifyCode"></div>
                    <div class="clear"></div>
                </div>
                <span id="check_verifyCode" class="error_icon"></span>
            </div>
            <div class="login_submit">
                <input id="submitForm" class="submit" type="button" name="submit" value="立即登录">
            </div>

        </div>
    </div>
</form>
<footer>
    <div class="copyright">简体 | 繁体 | English | 常见问题</div>
    <div class="copyright">小米公司版权所有-京ICP备10046444-<img src="/image/ghs.png" alt="">京公网安备11010802020134号-京ICP证110507号
    </div>
</footer>

<script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
<script type="application/javascript">
    $(document).ready(function () {


        // 刷新验证码
        $("#verifyCodeImg").click(function () {
            $("#verifyCodeImg").attr("src", "http://localhost:8080/user/login/verifyCode?" + new Date().getTime())
        });

        // 校验邮箱
        $("#email").on('blur', function (e) {
            var email = document.getElementById("email").value;
            if (email == '' || email == ' ') {
                $('#check_email').html("");
                $('#check_email').html("邮箱不能为空").css("color", "red");
                return false;
            }
            $('#check_email').html("");
            return true;
        });
        // 校验密码
        $("#password").on('blur', function (e) {
            var password = document.getElementById("password").value;
            if (password == '' || password == ' ') {
                $('#check_password').html("");
                $('#check_password').html("密码不能为空").css("color", "red");
                return false;
            }
            $('#check_password').html("");
            return true;
        });

        // 校验验证码不能为空
        $("#verifyCode").on('blur', function (e) {
            var verifyCode = document.getElementById("verifyCode").value;
            if (verifyCode == '' || verifyCode == ' ') {
                $('#check_verifyCode').html("");
                $('#check_verifyCode').html("验证码不能为空").css("color", "red");
                return false;
            }

            $('#check_verifyCode').html("");
            return true;
        });

        // 校验验证码是否正确
        $("#verifyCode").on('blur', function (e) {
            var codeValue = $("#verifyCode").val();
            $.ajax({
                url: "/check/verifyCode?codeValue=" + codeValue,
                success: function (result) {
                    console.log(result)
                    if (result == 1) {
                        // $("#check_verifyCode").html("").html("验证码输入正确").css("color", "green");
                        return true;
                    }
                    $("#check_verifyCode").html("").html("验证码计算有误").css("color", "red");
                    return false;


                }
            })

        });

        // ajax 异步校验数据
        $("#submitForm").click(function () {
            var data = $("#addForm").serialize();
            $.ajax({
                url: "/user/login",
                data: data,
                dataType: 'json',
                success: function (result) {

                    if (result.status == -100) {
                        $("#check_verifyCode").html("").html("邮箱或者密码有错误").css("color", "red");
                        return false;
                    }
                    window.location.href = result.data;
                }
            })

        })


    });


</script>


</body>
</html>